<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="./js/jquery.js" type="text/javascript"></script>
	<body>
		<video id="mainVideo" autoplay></video>
		<button id="btn">click</button>
	</body>
	<script type="text/javascript">
		$("#document").ready(()=>{
			console.log($("#mainVideo")[0])
			function getLocalUserMedia(constrains) {
			  if (window.navigator.mediaDevices.getUserMedia) {
			    return window.navigator.mediaDevices.getUserMedia(constrains);
			  } else if (window.navigator.webkitGetUserMedia) {
			    return window.navigator.webkitGetUserMedia(constrains);
			  } else if (window.navigator.mozGetUserMedia) {
			    return window.navigator.mozGetUserMedia(constrains);
			  } else if (window.navigator.getUserMedia) {
			    return window.navigator.getUserMedia(constrains);
			  }
			  throw new Error("unable to get user media");
			}
			$("#btn").click(()=>{
				getLocalUserMedia({audio: true, video: true}).then(userMedia => {
					console.log(userMedia)
				    $("#mainVideo")[0].srcObject = userMedia;
					console.log($("#mainVideo")[0].srcObject)
				})
			})
			// const show=()=>{
				
			// }
		})
	</script>
	<style scoped>
		#mainVideo{
			width: 500px;
			height: 500px;
		}
	</style>
</html>